<template>
  <el-aside :width="collapseWidth" id="Aside">
    <div class="controlCollapse" @click="changeCollapse">|||</div>
    <!-- default-opends:默认展开的一级菜单项 -->
    <!-- unique-opend:是否只展开一个一级菜单 -->
    <!-- collapse:改变侧边栏展开方式 -->
    <!-- collapse-transition:转变展开方式是否启用动画 -->
    <!-- router:以el-menu-item组件的index为路由跳转 -->
    <el-menu
      background-color="rgba(49, 55, 67, 1)"
      text-color="#fff"
      active-text-color="rgba(64, 158, 255, 1)"
      :default-openeds="[defaultOpen]"
      :unique-opened="true" 
      :collapse="isCollapse"
      :collapse-transition="false"
      :router="true"
      :default-active="isActive"
    >
      <!-- 一级导航栏 -->
      <el-submenu :index="item.id + ''" v-for="item in asideList" :key="item.id">
        <template slot="title">
          <i :class="iconObj[item.id]"></i>
          <span>{{ item.authName }}</span>
        </template>

        <!-- 二级航栏组 -->
          <el-menu-item :index="i.path" v-for="i in item.children" 
          :key="i.id" @click="asideActive(i.path, item.id)">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>{{ i.authName }}</span>
            </template>
          </el-menu-item>

      </el-submenu>

    </el-menu>
  </el-aside>
</template>

<script>
// 交互
import { getAsideDate } from '@/network/homeRequest.js';

export default {
  name: 'Aside', 
  data() {
    return {
      asideList: [], // 侧边栏数据
      iconObj: { // 字体图标对象
        '125': 'iconfont icon-yonghu',
        '103': 'iconfont icon-tijikongjian',
        '101': 'iconfont icon-shangpin',
        '102': 'iconfont icon-dingdan',
        '145': 'iconfont icon-faxian'
      },
      isCollapse: false, // 展开模式
      collapseWidth: '200px', // 侧边栏宽度
      isActive: '', // 默认选中侧边栏
      defaultOpen: '' // 默认展开项
    }
  },
  created() { // 创建vm实例后执行
    this.getAsideList();

    // 刷新时读取sessionStorage的存储值
    const flag = window.sessionStorage.getItem('isActive');
    if (flag) {
      this.isActive = flag;
    }

    // 浏览器控制按钮前进后退触发函数
    window.addEventListener('popstate', this.popstate, false);

    // 创建兄弟事件bus
    this.$bus.$on('dfActive', () => { // 访问到welecome组件时将默认选中、默认展开重置
      this.isActive = '';
      this.defaultOpen = '';
    })
  },
  destroyed() { // 销毁vm组件
    // 避免堆栈溢出，多次创建、多次触发
    window.removeEventListener('popstate', this.popstate, false);
  },
  methods: {
    async getAsideList() { // 获取侧边栏数据
      const ret = await getAsideDate();
      // console.log(ret);
      if (ret.meta.status !== 200) { // 未成功
        return this.$message({
          showClose: true,
          message: '获取侧边栏表单失败',
          type: 'error'
        });
      }

      // 成功
      
      ret.data.forEach(item => {
        item.path = '/' + item.path;
        item.children.forEach(i => {
          i.path = '/' + i.path;
        })
      })
      // console.log(ret.data);
      this.asideList = ret.data;
    },
    changeCollapse() { // 改变侧边栏的展开方式  改变侧边栏宽度
      this.isCollapse = !this.isCollapse;
      this.collapseWidth == '200px' ? this.collapseWidth = '64px' : this.collapseWidth = '200px';
    },
    asideActive(activeName, defaultValue) { // 侧边栏点击选中事件  将默认展开的default-openeds修改
      // console.log(activeName, defaultValue);
      window.sessionStorage.setItem('isActive', activeName);
      this.isActive = activeName;
      this.defaultOpen = defaultValue.toString();
    },
    popstate() { // 浏览器前进后退触发函数

      const name = this.$route.path;
      if(name === '/welecom') { // 回到welecome组件返回,welecome组件设置了对应的方法
        return;
      }
      
      if (name === '/goods/add') { // 特殊情况
        window.sessionStorage.setItem('isActive', '/goods');
        this.isActive = '/goods';
        return;
      }

      // 非上面几种情况执行常规操作
      window.sessionStorage.setItem('isActive', name);
      this.isActive = name;

      // 结构  迭代  一级菜单导航
      const { id } = this.asideList.find(item => {
        return item.children.find(res => {
          return res.path == name;
        })
      })

      this.defaultOpen = id.toString(); // 重新赋值默认打开一级菜单栏导航
    }
  }
}
</script>

<style lang="scss" scoped>
#Aside { // 侧边栏
  background-color: rgba(49, 55, 67, .9);

  .el-menu-item:hover { // 二级导航栏鼠标悬停背景色
    background-color: $asideHoverBackgroundColor !important;
  }
}


.iconfont { // 字体图标
  margin-right: 8px;
}

.el-menu { // 清除侧边栏边框
  border: none;
}

.controlCollapse { // 折叠菜单样式
  background-color: rgba(71, 81, 99, 1);
  text-align: center;
  line-height: 100%;
  padding: 3px 0;
  letter-spacing: 4px;
  color: whitesmoke;
  opacity: .6;
  cursor: pointer;
}

</style>